<template>
	<!--全球榜-->
	<div class="middle">
		<h5>全球榜</h5>
		<ul>
			<li v-for="item in musicImg">
				<div class="CrunchiesImg">
					<img :src="item.pic_big" />
				</div>
				<div class="CrunchiesText">
					<p>{{item.text}}</p>
				</div>

			</li>
		</ul>
	</div>
</template>
<script>
	import jsonp from "jsonp";
	export default {
		name: 'rankmusic',
		props: ["musicImg", "type", "src"],
		components: {},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.middle {
		width: 93%;
		height: 50%;
		margin: 0 auto;
		margin-top: 5.8%;
	}
	
	h5 {
		font-size: 18px;
		color: #000000;
		text-align: center;
	}
	ul{
		margin-top: 6%;
	}
	ul li {
		width: 32%;
		padding-top: 33%;
		font-size: 0;
		float: left;
		position: relative;
		margin-right: 2%;
		&:nth-child(3n){
			margin-right: 0;
		}
		>&:last-child.rankingText{
			border-bottom: none;
		}
		img{
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	
	.CrunchiesImg {
		width: 23%;
		height: 23%;
		display: inline-block;
		padding: 0.3% 0.5%;
		
	}
	
	.CrunchiesImg img {
		width: 100%;
		display: inline-block;
		overflow: hidden;
	}
	.CrunchiesText{
		text-align: center;
	}
	p {
		font-size: 18px;
		color: #000000;
		text-align: center;
	}
</style>